<template>
  <div class="app-container">
    <el-row style="border-bottom:4px solid #e8ecf7;padding-bottom: 40px;">
      <el-col :span="6">
        <div style="margin-right:10px;border-top:4px solid #e8ecf7;">
          <div style="padding:10px;overflow:hidden;border-bottom:1px solid #eaedf8;">
            <div style="float: left;">合同数量</div>
            <div style="float:right;text-align:right;color: #fff;background-color: #2b89df;width: 50px;height: 24px;font-size:14px;line-height: 24px;text-align: center;border-radius: 2px;">总和</div>
          </div>
          <div style="padding:10px; font-size: 26px;">{{contractTotalArray.contractName == null ? 0 : contractTotalArray.contractName}}份</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="margin-right:10px;border-top:4px solid #e8ecf7;">
          <div style="padding:10px;overflow:hidden;border-bottom:1px solid #eaedf8;">
            <div style="float: left;">相对方数量</div>
            <div style="float:right;text-align:right;color: #fff;background-color: #2b89df;width: 50px;height: 24px;font-size:14px;line-height: 24px;text-align: center;border-radius: 2px;">总和</div>
          </div>
          <div style="padding:10px; font-size: 26px;">{{contractTotalArray.counterpartNum == null ? 0 : contractTotalArray.counterpartNum}}家</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="margin-right:10px;border-top:4px solid #e8ecf7;">
          <div style="padding:10px;overflow:hidden;border-bottom:1px solid #eaedf8;">
            <div style="float: left;">收入合同金额</div>
            <div style="float:right;text-align:right;color: #fff;background-color: #2b89df;width: 50px;height: 24px;font-size:14px;line-height: 24px;text-align: center;border-radius: 2px;">总和</div>
          </div>
          <div style="padding:10px; font-size: 26px;">{{contractTotalArray.amountAccount == null ? 0 : contractTotalArray.amountAccount}}元</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="margin-right:10px;border-top:4px solid #e8ecf7;">
          <div style="padding:10px;overflow:hidden;border-bottom:1px solid #eaedf8;">
            <div style="float: left;">支出合同金额</div>
            <div style="float:right;text-align:right;color: #fff;background-color: #2b89df;width: 50px;height: 24px;font-size:14px;line-height: 24px;text-align: center;border-radius: 2px;">总和</div>
          </div>
          <div style="padding:10px; font-size: 26px;">{{contractTotalArray.amountAccount1 == null ? 0 : contractTotalArray.amountAccount1}}元</div>
        </div>
      </el-col>
    </el-row>
    <el-row style="border-bottom:4px solid #e8ecf7;padding-bottom: 40px;">
      <el-col :span="6">
        <div style="margin-right:10px;border-top:4px solid #e8ecf7;">
          <div style="padding:10px;overflow:hidden;border-bottom:1px solid #eaedf8;">
            <div style="float: left;">计划付款金额</div>
            <div style="float:right;text-align:right;color: #fff;background-color: #2b89df;width: 50px;height: 24px;font-size:14px;line-height: 24px;text-align: center;border-radius: 2px;">总和</div>
          </div>
          <div style="padding:10px; font-size: 26px;">{{contractTotalArray.plan_amount == null ? 0 : contractTotalArray.plan_amount}}元</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="margin-right:10px;border-top:4px solid #e8ecf7;">
          <div style="padding:10px;overflow:hidden;border-bottom:1px solid #eaedf8;">
            <div style="float: left;">计划回款金额</div>
            <div style="float:right;text-align:right;color: #fff;background-color: #2b89df;width: 50px;height: 24px;font-size:14px;line-height: 24px;text-align: center;border-radius: 2px;">总和</div>
          </div>
          <div style="padding:10px; font-size: 26px;">{{contractTotalArray.plan_amount1 == null ? 0 : contractTotalArray.plan_amount1}}元</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="margin-right:10px;border-top:4px solid #e8ecf7;">
          <div style="padding:10px;overflow:hidden;border-bottom:1px solid #eaedf8;">
            <div style="float: left;">回款金额</div>
            <div style="float:right;text-align:right;color: #fff;background-color: #2b89df;width: 50px;height: 24px;font-size:14px;line-height: 24px;text-align: center;border-radius: 2px;">总和</div>
          </div>
          <div style="padding:10px; font-size: 26px;">{{contractTotalArray.amount == null ? 0 : contractTotalArray.amount}}元</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="margin-right:10px;border-top:4px solid #e8ecf7;">
          <div style="padding:10px;overflow:hidden;border-bottom:1px solid #eaedf8;">
            <div style="float: left;">付款金额</div>
            <div style="float:right;text-align:right;color: #fff;background-color: #2b89df;width: 50px;height: 24px;font-size:14px;line-height: 24px;text-align: center;border-radius: 2px;">总和</div>
          </div>
          <div style="padding:10px; font-size: 26px;">{{contractTotalArray.amount1 == null ? 0 : contractTotalArray.amount1}}元</div>
        </div>
      </el-col>
    </el-row>
    <el-row style="border-bottom:4px solid #e8ecf7;padding-bottom: 40px;">
      <el-col :span="6">
        <div style="margin-right:10px;border-top:4px solid #e8ecf7;">
          <div style="padding:10px;overflow:hidden;border-bottom:1px solid #eaedf8;">
            <div style="float: left;">开票金额</div>
            <div style="float:right;text-align:right;color: #fff;background-color: #2b89df;width: 50px;height: 24px;font-size:14px;line-height: 24px;text-align: center;border-radius: 2px;">总和</div>
          </div>
          <div style="padding:10px; font-size: 26px;">{{contractTotalArray.invoiceAmount == null ? 0 : contractTotalArray.invoiceAmount}}元</div>
        </div>
      </el-col>
    </el-row>
    <div style="width: 50%;float: left; height: 500px">
      <div class="clearfix" style="border-top:4px solid #e8ecf7;margin-top: 30px;padding: 10px;">
        <div class="fl" style="line-height:35px;">数据统计</div>
        <el-button class="fr" style="margin-left:10px" @click="seachData(1)" type="success">搜索</el-button>

        <div class="fr">
          <el-select clearable v-model="counterpartId1" style="width: 180px;" placeholder="请选择相对方">
            <el-option
              v-for="item in counterpartList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-date-picker
            v-model="value1"
            value-format="yyyy-MM"
            type="month"
            placeholder="选择日期">
          </el-date-picker>
        </div>

      </div>



      <div style="background:#f2f2f2; padding: 10px;">

        <div style="line-height:40px;border-bottom:1px solid #d7d7d7;">收入合同数量</div>
        <div style="width:100%; height:500px;" id="incomeContractNumInt"></div>
      </div>
    </div>

    <div style="width: 50%;float: left;border-left: solid 2px  #e8ecf7; height: 500px">
      <div class="clearfix" style="border-top:4px solid #e8ecf7;margin-top: 30px;padding: 10px;">
        <div class="fl" style="line-height:35px;">数据统计</div>
        <el-button class="fr" style="margin-left:10px" @click="seachData(2)" type="success">搜索</el-button>
        <div class="fr">
          <el-select clearable v-model="counterpartId2" style="width: 180px;" placeholder="请选择相对方">
            <el-option

              v-for="item in counterpartList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-date-picker
            v-model="value2"

            value-format="yyyy-MM"
            type="month"
            placeholder="选择日期">
          </el-date-picker>
        </div>
      </div>


      <div style="background:#f2f2f2; padding: 10px;">

        <div style="line-height:40px;border-bottom:1px solid #d7d7d7;">支出合同数量</div>
        <div style="width:100%; height:500px;" id="expenditureContractNum"></div>
      </div>
    </div>



    <div style="width: 50%;float: left;height: 500px;margin-top: 11%;">
      <div class="clearfix" style="border-top:4px solid #e8ecf7;margin-top: 30px;padding: 10px;">
        <div class="fl" style="line-height:35px;">数据统计</div>
        <el-button class="fr" style="margin-left:10px" @click="seachData(3)" type="success">搜索</el-button>
        <div class="fr">
          <el-select clearable v-model="counterpartId3" style="width: 200px;" placeholder="请选择相对方">
            <el-option

              v-for="item in counterpartList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-date-picker
            v-model="value3"

            value-format="yyyy-MM"
            type="month"
            placeholder="选择日期">
          </el-date-picker>
        </div>
      </div>


      <div style="background:#f2f2f2; padding: 10px;">

        <div style="line-height:40px;border-bottom:1px solid #d7d7d7;">收入合同金额</div>
        <div style="width:100%; height:500px;" id="incomeContractAmount"></div>
      </div>
    </div>

    <div style="width: 50%;float: left;border-left: solid 2px  #e8ecf7;height: 500px;margin-top: 11%;">
      <div class="clearfix" style="border-top:4px solid #e8ecf7;margin-top: 30px;padding: 10px;">
        <div class="fl" style="line-height:35px;">数据统计</div>
        <el-button class="fr" style="margin-left:10px" @click="seachData(4)" type="success">搜索</el-button>
        <div class="fr">
          <el-select clearable v-model="counterpartId4" style="width: 200px;" placeholder="请选择相对方">
            <el-option

              v-for="item in counterpartList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-date-picker
            v-model="value4"

            value-format="yyyy-MM"
            type="month"
            placeholder="选择日期">
          </el-date-picker>
        </div>
      </div>


      <div style="background:#f2f2f2; padding: 10px;">

        <div style="line-height:40px;border-bottom:1px solid #d7d7d7;">支出合同金额</div>
        <div style="width:100%; height:500px;" id="expenditureContractAmoun"></div>
      </div>
    </div>

    <div style="width: 50%;float: left;height: 500px;margin-top: 11%;">
      <div class="clearfix" style="border-top:4px solid #e8ecf7;margin-top: 30px;padding: 10px;">
        <div class="fl" style="line-height:35px;">数据统计</div>
        <el-button class="fr" style="margin-left:10px" @click="seachData(5)" type="success">搜索</el-button>
        <div class="fr">
          <el-select clearable v-model="counterpartId5" style="width: 200px;" placeholder="请选择相对方">
            <el-option

              v-for="item in counterpartList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-date-picker
            v-model="value5"

            value-format="yyyy-MM"
            type="month"
            placeholder="选择日期">
          </el-date-picker>
        </div>
      </div>


      <div style="background:#f2f2f2; padding: 10px;">

        <div style="line-height:40px;border-bottom:1px solid #d7d7d7;">实际回款和计划回款</div>
        <div style="width:100%; height:500px;" id="collectionAndPlanData"></div>
      </div>
    </div>

    <div style="width: 50%;float: left;border-left: solid 2px  #e8ecf7;height: 500px;margin-top: 11%;">
      <div class="clearfix" style="border-top:4px solid #e8ecf7;margin-top: 30px;padding: 10px;">
        <div class="fl" style="line-height:35px;">数据统计</div>
        <el-button class="fr" style="margin-left:10px" @click="seachData(6)" type="success">搜索</el-button>
        <div class="fr">
          <el-select clearable v-model="counterpartId6" style="width: 200px;" placeholder="请选择相对方">
            <el-option

              v-for="item in counterpartList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
              <el-date-picker
                v-model="value6"

                value-format="yyyy-MM"
                type="month"
                placeholder="选择日期">
              </el-date-picker>
        </div>

      </div>


      <div style="background:#f2f2f2; padding: 10px;">

        <div style="line-height:40px;border-bottom:1px solid #d7d7d7;">实际付款和计划付款</div>
        <div style="width:100%; height:500px;" id="paymentAndPlanData"></div>
      </div>
    </div>

    <div  style="width: 50%;float: left;height: 500px;margin-top: 11%;">
      <div class="clearfix" style="border-top:4px solid #e8ecf7;margin-top: 30px;padding: 10px;">
        <div class="fl" style="line-height:35px;">数据统计</div>
        <el-button class="fr" style="margin-left:10px" @click="seachData(7)" type="success">搜索</el-button>
        <div class="fr">
          <el-select clearable v-model="counterpartId7" style="width: 200px;" placeholder="请选择相对方">
            <el-option
              v-for="item in counterpartList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-date-picker
            v-model="value7"

            value-format="yyyy-MM"
            type="month"
            placeholder="选择日期">
          </el-date-picker>
        </div>

      </div>


      <div style="background:#f2f2f2; padding: 10px;">

        <div style="line-height:40px;border-bottom:1px solid #d7d7d7;">发票数据</div>
        <div style="width:100%; height:500px;" id="invoice"></div>
      </div>
    </div>

    <div  style="width: 50%;float: left;height: 500px;margin-top: 11%;"></div>
    <div  style="width: 50%;float: left;height: 500px;margin-top: 11%;"></div>

  </div>
</template>
<style>
.fl{
  float: left;
}
.fr{
  float: right;
}
.clearfix:after{
  content: '';
  display: block；
  clear： both；
}
</style>
<script>
import {contractTotal,incomeContractNum,expenditureContractNum,incomeContractAmount,expenditureContractAmount,collectionAndPlanData,paymentAndPlanData,invoiceData} from "@/api/contract/manage";
import {listAllProject} from "@/api/contract/project";
import {listCounterpartAll} from "@/api/contract/counterpart";

export default {
  name: "DataCount",
  dicts: ['sys_yes_no'],
  data() {
    return {
      counterpartId1:null,
      counterpartId2:null,
      counterpartId3:null,
      counterpartId4:null,
      counterpartId5:null,
      counterpartId6:null,
      counterpartId7:null,
      reportGoodsTitle:[],
      reportGoodsData:[],
      ratioDataMap:{},
      orderTypeList:[],
      payTypeList:{
        dataList:[],
        titleDataList:[]
      },
      dataStatistics:{},
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      value5: '',
      value6: '',
      value7: '',
      // 遮罩层
      orderData: [ ],
      payData: [ ],

      contractTotalArray:[],
      incomeContractNumArray:[],
      incomeContractNumTitle:[],
      expenditureContractNumArray:[],
      expenditureContractNumTitle:[],
      incomeContractAmountArray:[],
      incomeContractAmountTitle:[],
      expenditureContractAmountArray:[],
      expenditureContractAmounTitle:[],
      collectionAndPlanDataArray:[],
      collectionAndPlanDataArray2:[],
      collectionAndPlanDataTitle:[],
      paymentAndPlanDataArray:[],
      paymentAndPlanDataArray2:[],
      paymentAndPlanDataTitle:[],
      invoiceDataTitle:[],
      invoiceDataArray:[],
      invoiceDataArray2:[],
      counterpartList:[],

    };
  },
  created() {
    this.initDate();
  },
  mounted(){
    this.getData();

  },
  methods: {
    seachData(type){
      if( type == 1){
        this.getDataMarket2(this.value1,this.counterpartId1);

      }else if(type == 2){
        this.getDataMarket3(this.value2,this.counterpartId2);

      }else if(type == 3){
        this.getDataMarket4(this.value3,this.counterpartId3);

      }else if(type == 4){
        this.getDataMarket5(this.value4,this.counterpartId4);

      }else if(type == 5){
        this.getDataMarket6(this.value5,this.counterpartId5);

      }else if(type == 6){
        this.getDataMarket7(this.value6,this.counterpartId6);

      }else if(type == 7){
        this.getDataMarket8(this.value7,this.counterpartId7);

      }
    },
    initDate(){
      let now = new Date();
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      if(month < 10){
        month = "0" + month;
      }
      this.value1 = year +"-"+ month;
      console.log(this.value1);
      this.value2 = year +"-"+ month;
      this.value3 = year +"-"+ month;
      this.value4 = year +"-"+ month;
      this.value5 = year +"-"+ month;
      this.value6 = year +"-"+ month;
      this.value7 = year +"-"+ month;

      listCounterpartAll({}).then( res =>{
        this.counterpartList = res.data;
      })
    },
    //格式化时间 返回年月日
    getDate(time) {
      if (time) {
        let val = new Date(time);
        let Y = val.getFullYear();
        let M = (val.getMonth() + 1) < 10 ? '0' + (val.getMonth() + 1) : (val.getMonth() + 1);
        let D = val.getDate() < 10 ? '0' + val.getDate() : val.getDate();
        let h = val.getHours() < 10 ? '0' + val.getHours() : val.getHours();
        let m = val.getMinutes() < 10 ? '0' + val.getMinutes() : val.getMinutes();
        return Y + '-' + M + '-' + D;
      }
      return ''
    },
    //获取各类报表数据
    getData(){
      this.getDataMarket1();
      this.getDataMarket2(this.value1);
      this.getDataMarket3(this.value2);
      this.getDataMarket4(this.value3);
      this.getDataMarket5(this.value4);
      this.getDataMarket6(this.value5);
      this.getDataMarket7(this.value6);
      this.getDataMarket8(this.value7);

    },

    //查询合同总数
    getDataMarket1(data){
      contractTotal({dataDate:data}).then(res =>{
          this.contractTotalArray = res.data
      })
    },

    //收入合同数量
    getDataMarket2(date,counterpartId){
      this.incomeContractNumArray = []
      this.incomeContractNumTitle = []
      incomeContractNum({dataDate:date,contractCounterpart:counterpartId}).then(res =>{
        for(var i = 0;i<res.data.length ;i++){
          this.incomeContractNumTitle.push(res.data[i].create_time)
          this.incomeContractNumArray.push(res.data[i].contractNum)
        }
          this.incomeContractNumInt()
      })
    },
    //支出合同数量
    getDataMarket3(data,counterpartId){
      this.expenditureContractNumTitle = [],
      this.expenditureContractNumArray = [],
      expenditureContractNum({dataDate:data,contractCounterpart:counterpartId}).then(res =>{
        for(var i = 0;i<res.data.length ;i++){
          this.expenditureContractNumTitle.push(res.data[i].create_time)
          this.expenditureContractNumArray.push(res.data[i].contractNum)
        }
        this.expenditureContractNumInt();
      })
    },

    //收入合同金额
    getDataMarket4(data,counterpartId){
      this.incomeContractAmountTitle = []
      this.incomeContractAmountArray = []
      incomeContractAmount({dataDate:data,contractCounterpart:counterpartId}).then(res =>{
        for(var i = 0;i<res.data.length ;i++){
          this.incomeContractAmountTitle.push(res.data[i].create_time)
          this.incomeContractAmountArray.push(res.data[i].contractNum)
        }
        this.incomeContractAmountInt()
      })
    },

    //支出合同金额
    getDataMarket5(data,counterpartId){
      this.expenditureContractAmounTitle = []
      this.expenditureContractAmountArray = []
      expenditureContractAmount({dataDate:data,contractCounterpart:counterpartId}).then(res =>{
        debugger
        for(var i = 0;i<res.data.length ;i++){
          this.expenditureContractAmounTitle.push(res.data[i].create_time)
          this.expenditureContractAmountArray.push(res.data[i].contractNum)
        }
        this.expenditureContractAmounInt()
      })
    },

    // 1 实际回款 2计划回款
    getDataMarket6(data,counterpartId){
      this.collectionAndPlanDataArray = []
      this.collectionAndPlanDataArray2 = []
      this.collectionAndPlanDataTitle = []
      collectionAndPlanData({dataDate:data,contractCounterpart:counterpartId}).then(res =>{
        let arr1=[];
        let arr2=[]
        let json = {}
        for(var i = 0;i<res.data.length ;i++){
          if(this.collectionAndPlanDataTitle.indexOf(res.data[i].amount_date) == -1){
            this.collectionAndPlanDataTitle.push(res.data[i].amount_date)
          }
          if(res.data[i].type=='实际回款'){
            this.collectionAndPlanDataArray.push(res.data[i].amount)
          }else{
            this.collectionAndPlanDataArray2.push(res.data[i].amount)
          }

        }

        this.collectionAndPlanDataInt()
      })
    },
    //1 实际付款 2计划付款
    getDataMarket7(data,counterpartId){
      this.paymentAndPlanDataTitle = []
      this.paymentAndPlanDataArray = []
      this.paymentAndPlanDataArray2 = []
      paymentAndPlanData({dataDate:data,contractCounterpart:counterpartId}).then(res =>{
        let arr1=[];
        let arr2=[]
        let json = {}
        for(var i = 0;i<res.data.length ;i++){
          if(this.paymentAndPlanDataTitle.indexOf(res.data[i].amount_date) == -1){
            this.paymentAndPlanDataTitle.push(res.data[i].amount_date)
          }
          console.log(res.data[i].type)
          if(res.data[i].type=='计划付款'){
            this.paymentAndPlanDataArray.push(res.data[i].amount)
          }else{
            this.paymentAndPlanDataArray2.push(res.data[i].amount)
          }
        }

        this.paymentAndPlanDataInt()
      })
    },
    getDataMarket8(data,counterpartId){
      this.invoiceDataArray = []
      this.invoiceDataArray2 = []
      this.invoiceDataTitle = []
      invoiceData({dataDate:data,contractCounterpart:counterpartId}).then(res =>{
        let arr1=[];
        let arr2=[]
        let json = {}
        for(var i = 0;i<res.data.length ;i++){
          console.log(this.invoiceDataTitle.indexOf(res.data[i].invoice_date))
          if(this.invoiceDataTitle.indexOf(res.data[i].invoice_date) ==-1) {
            this.invoiceDataTitle.push(res.data[i].invoice_date)
          }
          console.log(res.data[i].invoice_type)
          if(res.data[i].invoice_type=='销项发票金额'){
            this.invoiceDataArray.push(res.data[i].invoiceAmount)
          }else{
            this.invoiceDataArray2.push(res.data[i].invoiceAmount)
          }
        }

        this.invoiceDataInt()
      })
    },

    incomeContractNumInt(){
      var echartsDiv = this.$echarts.init(document.getElementById("incomeContractNumInt"));
      var option;
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data:  this.incomeContractNumTitle
        },
        color:[
          '#04cfd6',
        ],
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data:  this.incomeContractNumArray,
            type: 'bar'
          }
        ]
      };
      echartsDiv.setOption(option);
    },
    expenditureContractNumInt(){
      var echartsDiv = this.$echarts.init(document.getElementById("expenditureContractNum"));
      var option;
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data:  this.expenditureContractNumTitle
        },
        color:[
          '#04cfd6',
        ],
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data:  this.expenditureContractNumArray,
            type: 'bar'
          }
        ]
      };
      echartsDiv.setOption(option);
    },
    incomeContractAmountInt(){
      var echartsDiv = this.$echarts.init(document.getElementById("incomeContractAmount"));
      var option;
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data:  this.incomeContractAmountTitle
        },
        color:[
          '#04cfd6',
        ],
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data:  this.incomeContractAmountArray,
            type: 'bar'
          }
        ]
      };
      echartsDiv.setOption(option);
    },
    expenditureContractAmounInt(){
      var echartsDiv = this.$echarts.init(document.getElementById("expenditureContractAmoun"));
      var option;
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data:  this.expenditureContractAmounTitle
        },
        color:[
          '#04cfd6',
        ],
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data:  this.expenditureContractAmountArray,
            type: 'bar'
          }
        ]
      };
      echartsDiv.setOption(option);
    },
    collectionAndPlanDataInt(){
      console.log(this.collectionAndPlanDataArray)
      var echartsDiv = this.$echarts.init(document.getElementById("collectionAndPlanData"));
      var option;
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data:  this.collectionAndPlanDataTitle
        },
        color:[
          '#04cfd6',
        ],
        yAxis: {
          type: 'value'
        },
        series: [

          {
            name: '实际回款',
            type: 'bar',
            data: this.collectionAndPlanDataArray
          },
          {
            name: '计划回款',
            type: 'bar',
            data: this.collectionAndPlanDataArray2
          }
        ]
      };
      echartsDiv.setOption(option);
    },
    paymentAndPlanDataInt(){
      var echartsDiv = this.$echarts.init(document.getElementById("paymentAndPlanData"));
      var option;
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data:  this.paymentAndPlanDataTitle
        },
        color:[
          '#04cfd6',
        ],
        yAxis: {
          type: 'value'
        },
        series: [

          {
            name: '计划付款',
            type: 'bar',
            data: this.paymentAndPlanDataArray
          },
          {
            name: '实际付款',
            type: 'bar',
            data: this.paymentAndPlanDataArray2
          }
        ]
      };
      echartsDiv.setOption(option);
    },
    invoiceDataInt(){
      var echartsDiv = this.$echarts.init(document.getElementById("invoice"));
      var option;
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data:  this.invoiceDataTitle
        },

        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '销项发票金额',
            type: 'bar',
            data: this.invoiceDataArray
          },
          {
            name: '进项发票金额',
            type: 'bar',
            data: this.invoiceDataArray2
          }
        ]
      };
      echartsDiv.setOption(option);
    },
  }
};
</script>
